/**
 * Animation 混合器 集合；混合器参数为$time
 */
// fade-in 从完全透明（opacity: 0）渐变到完全不透明（opacity: 1）
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin animation-fade-in($time: 2s) {
  animation: fade-in $time;
}
@mixin animation-fade-out($time: 2s) {
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  animation: fade-out $time;
}
// move-up 从其原始位置向上移动其自身高度的100%，然后移动回原始位置。
@keyframes move-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@mixin animation-move-up($time: 2s) {
  animation: move-up $time;
}

// move-down 从其原始位置向下移动其自身高度的100%，然后移动回原始位置
@keyframes move-down {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@mixin animation-move-down($time: 2s) {
  animation: move-down $time;
}

// rotate-infinite 元素无限期地旋转，每次旋转360度
@keyframes rotate-infinite {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@mixin animation-infinite-rotate($time: 2s) {
  animation: rotate-infinite $time linear normal infinite;
}

// move-right 元素从其原始位置向右移动其自身宽度的100%，然后移动回原始位置
@keyframes move-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@mixin animation-move-right($time: 2s) {
  animation: move-right $time;
}

// move-left 元素从其原始位置向左移动其自身宽度的100%，然后移动回原始位置。
@keyframes move-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@mixin animation-move-left($time: 2s) {
  animation: move-left $time;
}

// up-down-shake 元素在其原始位置上下移动，移动距离为其自身高度的7%，创建一种抖动的效果
@keyframes up-down-shake {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(7%);
  }
  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(7%);
  }

  100% {
    transform: translateY(0);
  }
}

@mixin animation-up-down-shake($time: 4s) {
  animation: up-down-shake $time ease-in-out normal infinite;
}

// twinkle-infinite  元素的透明度在0（完全透明）和1（完全不透明）之间变化，创建一种闪烁的效果
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }

  75% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

@mixin animation-twinkle($time: 2s) {
  animation: twinkle $time linear normal infinite;
}

// bg-twinkle-infinite 类似于 twinkle，但是透明度的变化范围是0.3到0.8，用于背景元素的闪烁效果
@keyframes bg-twinkle {
  0% {
    opacity: 0.3;
  }

  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }

  75% {
    opacity: 0.6;
  }

  100% {
    opacity: 0.3;
  }
}

@mixin animation-bg-twinkle($time: 3s) {
  animation: bg-twinkle $time linear normal infinite;
}

// 放大缩小回弹
@mixin animation-scale($time: 2s, $rate: 1.2) {
  @keyframes my-scale{
    0% {
      transform-origin: right bottom;
      transform: scale(1) translate(0, 0);
    }
    50% {
      transform-origin: center center;
      transform: scale($rate) translate(0, 0);;
    }
    100% {
      transform-origin: center center;
      transform: scale(1) translate(0, 0); // 在 translate(0, 0) 中，x 和 y 都是 0，这意味着元素不会移动。这通常用于重置或取消之前的移动变换
    }
  }
  animation: my-scale $time ease-in-out normal; //缓动函数，它在动画开始时和结束时速度较慢，在中间时速度较快。这可以创建一种加速然后减速的效果
}
